// Web API：是浏览器提供的一组接口，允许开发者使用js去操作html和浏览器
// 分类：DOM(文档对象模型)——操作网页内容、BOM(浏览器对象模型)——操作浏览器窗口
// DOM(文档对象模型)：它将 HTML 或 XML 文档表示成一个由节点对象组成的树形结构（DOM 树），允许程序和脚本动态地访问和更新文档的内容、结构和样式。
// DOM对象：浏览器解析HTML文档后，会构建一个DOM树，这个树中的每一个节点都是一个DOM对象（例如，一个元素节点(HTML标签（如 <div>, <p>, <a>）)是一个DOM对象，一个文本节点(元素内的文本内容)也是一个DOM对象）。这些DOM对象是遵循DOM规范的标准对象，它们有属性和方法，可以用JavaScript来操作。
// document对象：是 JavaScript 中代表整个 HTML 文档的根节点，提供的属性和方法可以用来访问和操作网页内容
// 在JavaScript中，获取DOM元素节点有多种方法，以下是一些常用的方法：
// getElementById：通过元素的id属性获取元素节点。
// getElementsByClassName：通过元素的class属性获取元素集合。
// getElementsByTagName：通过标签名获取元素集合。
// querySelector：通过CSS选择器获取第一个匹配的元素节点。*
// querySelectorAll：通过CSS选择器获取所有匹配的元素集合。*
// getElementsByName：通过name属性获取元素集合（主要用于表单元素）。
// DOM 树结构：
// 文档 (Document)
// └── html (元素节点)
//     ├── head (元素节点)
//     │   └── title (元素节点)
//     │       └── "我的页面" (文本节点)
//     └── body (元素节点)
//         ├── div (元素节点)
//         │   └── "这是一个div元素" (文本节点)
//         └── p (元素节点)
//             └── "这是一个段落" (文本节点)